<template>
  <div class="logo-card">
    <svg v-if="ext == 'dmg'"
        t="1728716237030"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        style="position: absolute;left: 2px;top: 2px;"
        xmlns="http://www.w3.org/2000/svg"
        p-id="13916"
        width="200"
        height="200"
      >
        <path
          d="M102.4 102.4m307.2 0l204.8 0q307.2 0 307.2 307.2l0 204.8q0 307.2-307.2 307.2l-204.8 0q-307.2 0-307.2-307.2l0-204.8q0-307.2 307.2-307.2Z"
          fill="#D57875"
          p-id="13917"
        ></path>
        <path
          d="M917.3504 358.4H819.2c-84.83328 0-153.6-68.76672-153.6-153.6V106.6496c128.64 21.5808 230.1696 123.1104 251.7504 251.7504z"
          fill="#BC5E5B"
          p-id="13918"
        ></path>
        <path
          d="M412.5696 729.6l-3.2256-3.584h26.7008v82.7904H313.6512v-50.176l-2.8672-3.584h101.7856v-25.4464z m-75.6224 66.8416h75.6224v-29.0304H336.9472v29.0304zM568.832 767.4112h-37.632l-0.1792 41.3952h-23.296v-41.3952H469.9136l-0.1792 41.3952h-23.296v-50.3552l-3.2256-3.4048h64.512l11.2896 10.752 12.1856-10.752h60.928v53.76H568.832zM602.7008 758.4512l-3.4048-3.4048h120.4224v92.4672a4.06016 4.06016 0 0 0-2.77504-2.78016 12.78976 12.78976 0 0 0-3.67616-0.62464H602.7008v-15.5904l5.7344 3.0464h87.9872v-22.7584H602.7008v-50.3552z m23.296 37.9904h70.4256v-29.0304h-70.4256v29.0304z"
          fill="#FFFFFF"
          p-id="13919"
        ></path>
        <path
          d="M659.74272 381.44512l-0.54784 0.29696A110.22336 110.22336 0 0 0 601.8048 478.73536c0 45.25568 27.02336 84.13184 65.65376 101.04832l-12.36992 36.46976c-14.21312 41.87648-59.67872 64.3072-101.5552 50.09408a80.07168 80.07168 0 0 1-35.95264-24.76544l-1.3312-1.65376c-27.8528 34.70336-78.56128 40.25344-113.26464 12.39552a80.57344 80.57344 0 0 1-25.856-36.9408l-39.168-115.4048c-18.86208-55.58784 10.9056-115.93728 66.49344-134.79936a106.28096 106.28096 0 0 1 110.3616 26.56768l1.4336 1.5104c37.72416-41.06752 100.33152-45.63456 143.488-11.81184z m-38.1952-128.42496l2.54464 0.01536c0.46592 34.40128-9.65632 62.06464-30.37184 82.99008-20.71552 20.92032-48.1024 31.15008-82.16064 30.67392-0.47104-34.40128 9.65632-62.05952 30.37184-82.98496 20.71552-20.92544 48.1024-31.15008 82.16064-30.67904z"
          fill="#FFFFFF"
          p-id="13920"
        ></path>
      </svg>
      <svg v-else-if="ext == 'zip'" 
      style="position: absolute;left: 2px;top: 2px;"
      t="1728718854145" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19828" width="200" height="200"><path d="M289.269897 7.111109A165.333292 165.333292 0 0 0 123.682636 172.69837v685.714116a165.333292 165.333292 0 0 0 165.587261 165.58726h516.063364a165.587261 165.587261 0 0 0 165.58726-165.58726V347.936422a62.730143 62.730143 0 0 0-18.28571-43.174593L674.79361 25.396819a62.984111 62.984111 0 0 0-44.444433-18.28571z" fill="#FF803F" p-id="19829"></path><path d="M952.634811 304.761829L674.79361 25.396819a61.460302 61.460302 0 0 0-32.25396-16.761901 6.095237 6.095237 0 0 0-7.111109 6.349205v134.349173a193.523762 193.523762 0 0 0 193.523761 193.523762h134.349173a6.095237 6.095237 0 0 0 6.095237-7.11111 60.952366 60.952366 0 0 0-16.761901-30.984119z" fill="#F3671E" p-id="19830"></path><path d="M835.809443 311.872939h123.68251a54.857129 54.857129 0 0 0-6.857142-8.380951L674.79361 25.396819a70.603157 70.603157 0 0 0-8.38095-6.857141V142.222187a169.650752 169.650752 0 0 0 169.396783 169.650752z" fill="#FECEB4" p-id="19831"></path><path d="M336.000044 625.523654l95.492039-132.825363h-86.349184v-30.98412h136.380918v22.095233l-95.238072 132.825364h96.253945v31.238087h-146.539646zM518.857141 461.714171h41.142847v186.158684h-41.142847zM610.28569 461.714171h67.301571c53.587288 0 80.253948 19.301583 80.253948 58.412684a53.841256 53.841256 0 0 1-22.857137 46.730147 96.253944 96.253944 0 0 1-56.380939 14.984124h-27.428564v66.031729h-40.888879z m65.523793 90.666644c27.936501 0 41.904752-10.920632 41.904752-32.25396a25.396819 25.396819 0 0 0-11.174601-22.857137 64.253952 64.253952 0 0 0-31.999992-6.095237h-23.365073v61.206334z" fill="#F5F6FA" p-id="19832"></path></svg>
      <svg v-else-if="ext == 'rar'" 
      style="position: absolute;left: 2px;top: 2px;"
      t="1728718983315" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21819" width="200" height="200"><path d="M146.879977 0A52.335992 52.335992 0 0 0 95.999985 51.167992v921.647856a49.039992 49.039992 0 0 0 15.279998 35.791994A49.839992 49.839992 0 0 0 146.863977 1023.99984h746.287883a48.559992 48.559992 0 0 0 35.567995-15.359998A50.719992 50.719992 0 0 0 943.999853 972.815848V290.015955L655.679898 0H146.847977h0.016z" fill="#FF5900" p-id="21820"></path><path d="M943.999853 287.999955H706.84789A52.127992 52.127992 0 0 1 655.999898 237.199963V0l287.951955 287.999955H943.999853z" fill="#FFFFFF" fill-opacity=".7" p-id="21821"></path><path d="M323.519949 648.831899v-51.199992h20.479997c21.759997 0 33.535995 5.887999 33.535995 23.807996s-11.775998 27.391996-33.535995 27.391996h-20.479997zM380.607941 751.999883h51.199992l-42.495994-75.519989c19.711997-9.215999 32.767995-27.135996 32.767995-55.039991 0-46.079993-33.791995-60.159991-74.495988-60.159991h-69.887989V751.999883h45.823992v-67.07199h22.015997L380.607941 751.999883z m51.455991 0h46.591993l11.007998-43.775994h56.319992L556.991913 751.999883h48.127992l-59.13599-190.719971H491.199923L432.063932 751.999883z m66.30399-79.103988l4.095999-16.127998c4.863999-18.943997 9.983998-41.215994 14.591998-61.18399h1.024c5.119999 19.455997 9.983998 42.239993 15.103998 61.18399l4.095999 16.127998h-38.911994z m172.543973-24.063996v-51.199992h20.479997c21.759997 0 33.535995 5.887999 33.535995 23.807996s-11.775998 27.391996-33.535995 27.391996h-20.479997zM727.999886 751.999883h51.199992l-42.495993-75.519989c19.711997-9.215999 32.767995-27.135996 32.767995-55.039991 0-46.079993-33.791995-60.159991-74.495989-60.159991h-69.887989V751.999883h45.823993v-67.07199h22.015997L727.999886 751.999883z" fill="#FFFFFF" p-id="21822"></path></svg>
    
      <svg v-else-if="ext == 'jar'" 
      style="position: absolute;left: 2px;top: 2px;" t="1728719070520" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25611" width="200" height="200"><path d="M745.862777 483.868132h-42.965035v79.792208h41.942058c26.597403 0 43.988012-13.298701 43.988012-38.873127 0-27.62038-18.413586-40.919081-42.965035-40.919081zM493.187453 493.074925l-29.666334 102.297702h62.401598l-29.666333-102.297702z" fill="#E45F3D" p-id="25612"></path><path d="M710.058581 0h-506.373626C153.559081 0 112.64 39.896104 112.64 90.021978v843.956044c0 49.102897 40.919081 90.021978 91.044955 90.021978h615.832168c50.125874 0 91.044955-39.896104 91.044955-90.021978v-736.543457L710.058581 0z m-364.17982 614.809191c0 61.378621-34.781219 91.044955-86.953047 91.044955-57.286713 0-84.907093-39.896104-84.907093-83.884116h52.171829c1.022977 20.45954 14.321678 33.758242 32.735264 33.758242 21.482517 0 33.758242-12.275724 33.758242-38.873127V439.88012h54.217782v174.929071z m208.687313 91.044955l-18.413586-64.447553h-82.861139l-19.436564 64.447553h-54.217782l83.884116-265.974026h63.424575l83.884116 265.974026h-56.263736z m235.284715 0l-43.988012-97.182817h-41.942058V705.854146h-53.194805V439.88012h103.320679c61.378621 0 90.021978 36.827173 90.021978 85.93007 0 43.988012-27.62038 67.516484-46.033966 74.677322l51.148852 105.366634h-59.332668z m-79.792208-510.465535V51.148851l147.308692 145.262737h-147.308692z" fill="#E45F3D" p-id="25613"></path></svg>
    
      <svg v-else-if="ext == 'war'" 
      style="position: absolute;left: 2px;top: 2px;" t="1728719505923" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="32554" width="200" height="200"><path d="M136.533604 0.00026a49.119975 49.119975 0 0 0-35.839982 15.359992C91.307627 25.600247 85.33463 38.40024 85.33463 51.200234v921.599532a49.119975 49.119975 0 0 0 15.359992 35.839982 50.545974 50.545974 0 0 0 35.839982 15.359992h750.931619a49.119975 49.119975 0 0 0 35.839981-15.359992 50.546974 50.546974 0 0 0 15.359993-35.839982V290.134113L648.533344 0.00026z" fill="#F9BD0F" p-id="32555"></path><path d="M938.666197 290.133113H699.733318a52.492973 52.492973 0 0 1-51.199974-51.199974V0.00026z" fill="#FEDF7E" p-id="32556"></path><path d="M419.45346 0.13326h92.159954v78.63196h-92.159954z m-92.159953 78.63196h92.159953v78.61496h-92.159953V78.76422z m92.159953 78.61496h92.159954v78.63196h-92.159954v-78.64896z m-92.159953 78.63196h92.159953v78.61496h-92.159953v-78.59996z m92.159953 78.61496h92.159954v78.63196h-92.159954z m-92.159953 78.63196h92.159953v78.63196h-92.159953z m92.159953 78.63196v78.61496h-92.159953V825.699841c0 21.699989 13.759993 39.29998 30.719985 39.29998h122.879937c16.959991 0 30.719984-17.599991 30.719985-39.29998V471.89102h-92.159954z m61.439969 314.493841H358.013492v-78.63296h122.879937z" fill="#FFFFFF" p-id="32557"></path></svg>
    
      <svg v-else-if="ext == '7z'" 
      style="position: absolute;left: 2px;top: 2px;" t="1728719689935" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="41973" width="200" height="200"><path d="M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z" fill="#FFC63A" p-id="41974"></path><path d="M685.511111 167.822222V0L967.111111 281.6H799.288889c-62.862222 0-113.777778-50.915556-113.777778-113.777778" fill="#DD9F08" p-id="41975"></path><path d="M436.565333 68.437333h68.437334V0h-68.437334zM505.002667 136.874667h68.437333V68.437333h-68.437333zM436.565333 205.312h68.437334V136.874667h-68.437334zM505.002667 273.749333h68.437333V205.312h-68.437333z" fill="#FFFFFF" p-id="41976"></path><path d="M436.565333 342.158222h68.437334V273.720889h-68.437334zM505.002667 410.624h68.437333V342.186667h-68.437333z" fill="#FFFFFF" p-id="41977"></path><path d="M436.565333 479.032889h68.437334v-68.437333h-68.437334zM505.002667 547.470222h68.437333v-68.437333h-68.437333zM470.784 762.225778h68.437333v-68.437334h-68.437333v68.437334z m-34.218667-136.874667v136.874667c0 18.915556 15.331556 34.218667 34.218667 34.218666h68.437333c18.915556 0 34.218667-15.303111 34.218667-34.218666v-136.874667h-136.874667z" fill="#FFFFFF" p-id="41978"></path></svg>
    
      <svg v-else-if="ext == 'iso'" 
      style="position: absolute;left: 2px;top: 2px;" t="1728719779682" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="46078" width="200" height="200"><path d="M923.136 267.605333v701.952H193.024v-909.653333h521.216z" fill="#7CCDFF" p-id="46079"></path><path d="M912.896 253.952l2.56 671.914667c0 15.530667-12.458667 27.989333-27.989333 27.989333H237.909333c-15.530667 0-27.989333-12.458667-27.989333-27.989333V96.938667c0-15.530667 12.458667-27.989333 27.989333-27.989334l493.397334-1.024-38.912-39.936H239.274667c-36.352 0-65.706667 29.354667-65.706667 65.706667v835.584c0 36.352 29.354667 65.706667 65.706667 65.706667h646.826666c36.352 0 65.706667-29.354667 65.706667-65.706667V293.888l-38.912-39.936z" fill="#4191FB" p-id="46080"></path><path d="M692.394667 222.72c0 39.424 31.914667 71.338667 71.338666 71.338667h188.245334L692.394667 27.989333v194.730667z" fill="#C7E2FF" p-id="46081"></path><path d="M557.568 482.304H158.72c-50.346667 0-91.136-40.789333-91.136-91.136v-60.245333c0-50.346667 40.789333-91.136 91.136-91.136h398.848c50.346667 0 91.136 40.789333 91.136 91.136v60.245333c0 50.346667-40.789333 91.136-91.136 91.136z" fill="#4191FB" p-id="46082"></path><path d="M180.053333 287.573333h46.08v155.818667h-46.08v-155.818667zM251.050667 391.850667l43.861333-2.901334c1.024 7.509333 2.901333 13.141333 5.802667 17.066667 4.778667 6.314667 11.434667 9.386667 20.309333 9.386667 6.485333 0 11.605333-1.536 15.189333-4.778667 3.584-3.242667 5.290667-6.997333 5.290667-11.264 0-4.096-1.706667-7.68-5.12-10.752-3.413333-3.242667-11.264-6.144-23.552-9.045333-20.138667-4.778667-34.645333-11.093333-43.178667-18.944-8.704-7.850667-12.970667-17.92-12.970666-30.037334 0-8.021333 2.218667-15.530667 6.656-22.698666 4.437333-7.168 11.093333-12.629333 19.968-16.725334 8.874667-4.096 21.162667-6.144 36.693333-6.144 19.114667 0 33.621333 3.754667 43.52 11.093334 10.069333 7.338667 15.872 19.114667 17.92 35.328l-43.349333 2.730666c-1.194667-6.997333-3.584-12.117333-7.338667-15.36s-8.874667-4.778667-15.36-4.778666c-5.290667 0-9.386667 1.194667-12.117333 3.584-2.730667 2.389333-4.096 5.290667-4.096 8.704 0 2.56 1.194667 4.778667 3.413333 6.656 2.218667 2.048 7.338667 3.925333 15.530667 5.802666 20.138667 4.608 34.474667 9.045333 43.178666 13.824 8.704 4.608 15.018667 10.410667 18.944 17.237334s5.973333 14.506667 5.973334 23.04c0 10.069333-2.56 19.114667-7.850667 27.648-5.290667 8.362667-12.629333 14.848-22.186667 19.114666-9.557333 4.437333-21.504 6.485333-35.84 6.485334-25.258667 0-42.837333-5.12-52.565333-15.36-9.898667-10.24-15.36-23.210667-16.725333-38.912zM403.626667 365.568c0-25.429333 6.826667-45.226667 20.309333-59.392s32.426667-21.162667 56.661333-21.162667c24.746667 0 43.861333 6.997333 57.344 20.821334 13.482667 13.994667 20.138667 33.450667 20.138667 58.538666 0 18.261333-2.901333 33.109333-8.874667 44.714667-5.802667 11.605333-14.336 20.650667-25.429333 27.136-11.093333 6.485333-24.917333 9.728-41.472 9.728-16.725333 0-30.72-2.730667-41.642667-8.362667-11.093333-5.632-19.968-14.506667-26.794666-26.624s-10.24-27.306667-10.24-45.397333z m46.08 0.170667c0 15.701333 2.730667 26.965333 8.362666 33.962666 5.632 6.826667 13.141333 10.24 22.869334 10.24 9.898667 0 17.578667-3.413333 23.04-10.069333s8.192-18.773333 8.192-36.181333c0-14.677333-2.901333-25.429333-8.533334-32.085334-5.632-6.826667-13.312-10.069333-23.04-10.069333-9.216 0-16.725333 3.413333-22.357333 10.24-5.802667 6.656-8.533333 18.090667-8.533333 33.962667z" fill="#FFFFFF" p-id="46083"></path><path d="M685.056 592.725333c-16.554667-15.872-35.84-28.16-57.173333-36.522666-21.333333-8.533333-43.861333-12.629333-66.730667-12.458667-23.722667 0.170667-46.933333 5.12-68.778667 14.677333-22.016 9.557333-41.301333 23.04-57.685333 40.106667-15.872 16.554667-28.16 35.84-36.522667 57.173333-8.533333 21.333333-12.629333 43.861333-12.458666 66.730667 0.170667 23.722667 5.12 46.933333 14.677333 68.778667 9.557333 22.016 23.04 41.301333 40.106667 57.685333 16.554667 15.872 35.84 28.16 57.173333 36.522667 21.333333 8.533333 43.861333 12.629333 66.730667 12.458666 23.722667-0.170667 46.933333-5.12 68.778666-14.677333 22.016-9.557333 41.301333-23.04 57.685334-40.106667 15.872-16.554667 28.16-35.84 36.522666-57.173333 8.533333-21.333333 12.629333-43.861333 12.458667-66.730667-0.170667-23.722667-5.12-46.933333-14.677333-68.778666s-23.04-41.472-40.106667-57.685334z m23.04 65.024c1.194667 2.730667 2.218667 5.290667 3.242667 8.021334l-82.944 35.84-0.341334 1.024c-0.853333-3.072-1.877333-5.973333-3.242666-9.045334-14.848-34.304-54.954667-50.176-89.258667-35.328L499.541333 575.146667c80.384-34.474667 173.738667 2.389333 208.554667 82.602666z m-165.034667 17.92c24.917333-10.752 53.930667 0.682667 64.682667 25.6s-0.682667 53.930667-25.6 64.682667-53.930667-0.682667-64.682667-25.6c-10.752-24.917333 0.682667-53.930667 25.6-64.682667z m-125.781333 108.032l83.114667-36.010666c14.848 34.304 54.954667 50.176 89.258666 35.328l36.010667 83.114666c-80.213333 34.816-173.568-2.218667-208.384-82.432z" fill="#4191FB" p-id="46084"></path></svg>

      <svg v-else
      style="position: absolute;left: 2px;top: 2px;"  t="1728719853058" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="48220" width="200" height="200"><path d="M51.2 0h921.6a51.2 51.2 0 0 1 51.2 51.2v921.6a51.2 51.2 0 0 1-51.2 51.2H51.2a51.2 51.2 0 0 1-51.2-51.2V51.2a51.2 51.2 0 0 1 51.2-51.2z" fill="#F46C6C" p-id="48221"></path><path d="M1024 51.2v307.2H0V51.2a51.2 51.2 0 0 1 51.2-51.2h921.6a51.2 51.2 0 0 1 51.2 51.2z" fill="#58ADF0" p-id="48222"></path><path d="M1024 665.6v307.2a51.2 51.2 0 0 1-51.2 51.2H51.2a51.2 51.2 0 0 1-51.2-51.2V665.6h1024z" fill="#75CF9F" p-id="48223"></path><path d="M665.6 1024H358.4V0h307.2z" fill="#FFCD5F" p-id="48224"></path><path d="M307.2 307.2m25.6 0l358.4 0q25.6 0 25.6 25.6l0 358.4q0 25.6-25.6 25.6l-358.4 0q-25.6 0-25.6-25.6l0-358.4q0-25.6 25.6-25.6Z" fill="#FFFFFF" p-id="48225"></path><path d="M358.4 358.4m25.6 0l256 0q25.6 0 25.6 25.6l0 256q0 25.6-25.6 25.6l-256 0q-25.6 0-25.6-25.6l0-256q0-25.6 25.6-25.6Z" fill="#FFCD5F" p-id="48226"></path></svg>

      <div class="day-text">
      {{ name }}
    </div>
    <svg t="1728709721504" @click="download"
          style="position: absolute;right: 10px; bottom: 10px;"
          class="control-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12683" width="20px" height="20px"><path d="M85.333333 585.813333a42.666667 42.666667 0 0 1 42.666667 42.666667v185.642667a42.666667 42.666667 0 0 0 42.666667 42.666666h682.666666a42.666667 42.666667 0 0 0 42.666667-42.666666V628.48a42.666667 42.666667 0 1 1 85.333333 0v185.642667a128 128 0 0 1-128 128H170.666667a128 128 0 0 1-128-128V628.48a42.666667 42.666667 0 0 1 42.666666-42.666667z" fill="#75C82B" p-id="12684"></path><path d="M341.333333 128a42.666667 42.666667 0 0 1 42.666667-42.666667h256a42.666667 42.666667 0 0 1 42.666667 42.666667v247.168h128a42.666667 42.666667 0 0 1 28.330666 74.581333l-298.666666 264.832a42.666667 42.666667 0 0 1-56.618667 0l-298.666667-264.832A42.666667 42.666667 0 0 1 213.333333 375.168h128V128z m85.333334 42.666667v247.168a42.666667 42.666667 0 0 1-42.666667 42.666666H325.76L512 625.621333l186.24-165.12H640a42.666667 42.666667 0 0 1-42.666667-42.666666V170.666667h-170.666666z" fill="#75C82B" p-id="12685"></path></svg>
  </div>
</template>

<script lang="ts" setup>
import { ref, toRefs } from "vue";
import FileSaver from "file-saver";

interface CardProps {
  url: string;
  name: string;
  ext: string;
}

const props = defineProps<CardProps>();
const { url, name, ext } = toRefs(props);

function download() {
  fetch(url.value)
    .then((response) => response.blob())
    .then((blob) => {
      FileSaver.saveAs(blob, name.value); // 下载后的文件名
    })
    .catch((error) => console.error("下载音频异常:", error));
}
</script>

<style scoped>
.logo-card {
  width: 280px;
  height: 150px;
  background: var(--gw-bg-color);
  display: flex;
  color: var(--gw-font-color);
  justify-content: center;
  position: relative;
  border: 1px solid var(--gw-bg-active-color);
  flex-direction: column;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  &:hover {
    cursor: default;
  }
}
.top {
  width: 100%;
  padding: 10px;
}

.time-text {
  font-size: 50px;
  margin-top: 0px;
  margin-left: 15px;
  font-weight: 600;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.time-sub-text {
  font-size: 15px;
  margin-left: 5px;
}

.day-text {
  font-size: 18px;
  margin-top: 0px;
  margin-left: 15px;
  font-weight: 500;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  padding: 10px;
}

.control-icon {
  width: 20px;
  height: 20px;
  &:hover {
    cursor: pointer;
  }
}
</style>
